<template>
  <div id="bg">
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <div class="formDiv">
          <div class="title">
            课程管理系统
          </div>
          <div class="form">
            <!--form表单-->
            <el-form ref="form" :model="user" :rules="rules">
              <el-form-item prop="username">
                <el-input v-model="user.username" placeholder="学号/工号/用户名">
                  <template slot="prepend">
                    <i class="el-icon-user-solid"></i>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item prop="password">
                <el-input v-model="user.password" placeholder="密码">
                  <template slot="prepend">
                    <i class="el-icon-lock"></i>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-radio v-model="user.type" style="color: white" label="0">学生</el-radio>
                <el-radio v-model="user.type" style="color: white" label="1">教师</el-radio>
                <el-radio v-model="user.type" style="color: white" label="2">管理员</el-radio>
              </el-form-item>


              <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {get, post} from "../common/request";
  import jwt_decode from "jwt-decode";
  import store from '../store'
  export default {
    name: "Login",
    data() {
      return {
        user: {
          username: "811010001",
          password: "123456",
          type: "0"
        },
        rules: {
          username: [
            {required: true, message: '请输入学号|教职工号|用户名', trigger: 'blur'},
            {min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      onSubmit() {

        this.$refs['form'].validate((valid) => {
          if (valid) {
            post("/login",this.user).then(x => {
              console.log(x);

              if(x.code == 1){//返回响应成功的数据
                console.log("获取到后端token++++++"+x.data)
                //获取服务器响应的token数据
                //把token字符串放入导进来的函数即可解码
                var token = jwt_decode(x.data);
                console.log("解析出token+++"+token);

                //把token中的数据 赋值给变量user 存入store中提供其他前端页面使用
                var user = {
                  username:token.sub,
                  type:token.type
                }
                //把token解码的数据存入store
                console.log(x.data)
                this.$store.dispatch('asyncUpdateToken',x.data)
                console.log("有没有"+store.getters.getToken);
                this.$store.dispatch('asyncUpdateUser',user);

                sessionStorage.setItem('state', JSON.stringify(this.$store.state));
                sessionStorage.setItem('token', this.$store.state.str);

                this.$message.success("登录成功");
                //页面延时跳转
                setTimeout(() => this.$router.push("/Main"),1500)
              }else {
                this.$message.error(x.msg);
              }
            })
          } else {
            this.$message.error("用户名或密码不能为空!")
            return false;
          }
        });
      },
    }
  }

</script>

<style scoped>
  #bg {
    background-image: url("../assets/bgwall.png");
    height: 100%;
    width: 100%;
    background-size: 100%;
  }

  .formDiv {
    background-color: rgba(0, 0, 0, 0.6);
    margin-top: 120px;
    color: white;
    border-radius: 10px;
  }

  .form {
    padding: 30px 30px 20px 30px;
  }

  .title {
    font-size: 25px;
    border-bottom: 1px solid white;
    height: 60px;
    line-height: 60px;
  }

</style>
